<template>
  <body>
    <div>
      <p class="reserve_card">车次预订记录</p>
      <el-table :data="changes">
        <!-- <el-table-column prop="date" label="日期" width="140">
        </el-table-column> -->
        <el-table-column prop="_id" label="ID" width="230"> </el-table-column>
        <el-table-column prop="name" label="航班名称"> </el-table-column>
        <el-table-column prop="start_position" label="起点"> </el-table-column>
        <el-table-column prop="end_position" label="终点"> </el-table-column>
        <el-table-column prop="start_date" label="出发时间"> </el-table-column>
        <el-table-column prop="end_date" label="到达时间"> </el-table-column>
        <el-table-column prop="money" label="价格"> </el-table-column>
        <el-table-column prop="left" label="票数"> </el-table-column>
        <el-table-column fixed="right" label="操作" width="180">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="replace(scope.row)"
              >车票改签</el-button
            >
            <el-button type="text" size="small" @click="remove(scope.row)"
              >取消预定</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <p class="reserve_card">车次预订历史</p>
      <el-table :data="items_history.slice((currentPage-1)*pagesize,currentPage*pagesize)">
        <el-table-column prop="_id" label="ID" width="230"> </el-table-column>
        <el-table-column prop="name" label="航班名称"> </el-table-column>
        <el-table-column prop="start_position" label="起点"> </el-table-column>
        <el-table-column prop="end_position" label="终点"> </el-table-column>
        <el-table-column prop="start_date" label="出发时间"> </el-table-column>
        <el-table-column prop="end_date" label="到达时间"> </el-table-column>
        <el-table-column prop="money" label="价格"> </el-table-column>
        <el-table-column prop="left" label="票数"> </el-table-column>
      </el-table>
      <el-pagination 
                     layout="prev, pager, next"
                     @current-change="current_change"
                     :total="total"
                
                    >
                  </el-pagination>
      <h1 class="complete_user">"完善"用户信息</h1>
      <el-form label-width="120px" @submit.native.prevent="save">
        <el-form-item label="用户名">
          <el-input v-model="username.username"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input type="password" v-model="username.password"></el-input>
        </el-form-item>
        <el-form-item label="身份证号">
          <el-input v-model="username.id_card"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-input v-model="username.sex"></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="username.phone"></el-input>
        </el-form-item>
        <el-form-item class="complete_user_save">
          <el-button type="primary" native-type="submit">保存</el-button>
        </el-form-item>
      </el-form>
    </div>
  </body>
</template>
<script>
export default {
  data() {
    return {
      username: {},
      items: [],
      findFlight: {},
      items_history: [],
      total:100,//默认数据总数
      pagesize:9,//每页的数据条数
      currentPage:1,//默认开始页面
      changes: [],
    }
  },
  created() {
    this.fetchName()
    this.fetch()
    this.fetch_history()
  },
  methods: {
    async save() {
      if (this.username.id_card == '' || (!(/\d{17}[\d|x]|\d{15}/).test(this.username.id_card) || (this.username.id_card.length !== 15 && this.username.id_card.length !== 18))) {
        this.$message({
          type: 'error',
          message: '身份证格式错误'
        })
        return
      }
      if (this.username.phone == '' || (!(/^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/).test(this.username.phone))) {
        this.$message({
          type: 'error',
          message: '手机号格式错误'
        })
        return
      }
      let res
      res = await this.$http.put(`save_custom_users`, this.username)

      this.$message({
        type: 'success',
        message: '保存成功'
      })
    },
    async fetchName() {
      console.log(localStorage.token)
      const res = await this.$http.get('rest/flights', localStorage.token)
      this.username = res.data
    },
    async fetch() {
      const res = await this.$http.get('user_flights')
      this.items = res.data
      this.items.forEach((time,index)=>{
        time.start_date = this.$moment(time.start_date).format('YYYY-MM-DD HH:mm:ss')
        time.end_date = this.$moment(time.end_date).format('YYYY-MM-DD HH:mm:ss')
        console.log(this.time_show)
      })
      if (this.$cookies.isKey('change')) {
        console.log("接收到了退改签")
        this.items.forEach((time,index)=>{
          if(time.start_position === this.$cookies.get('change').start_position && time.end_position === this.$cookies.get('change').end_position){
              this.changes.push(time)
              console.log('匹配')
          }else{
            console.log('不匹配')
          }
      })
      }else{
        this.changes = this.items
      }
      console.log(this.items+'items')
    },
    async fetch_history() {
      const res = await this.$http.get('user_flights_history')
      this.items_history = res.data
      this.items_history.forEach((time,index)=>{
        time.start_date = this.$moment(time.start_date).format('YYYY-MM-DD HH:mm:ss')
        time.end_date = this.$moment(time.end_date).format('YYYY-MM-DD HH:mm:ss')
        console.log(this.time_show)
      })
      this.total = this.items_history.length
      console.log(this.items_history)
    },
    async remove(row) {
      console.log(row)
      this.$confirm(`此操作将取消预定"${row.name}"班次?, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const res = await this.$http.delete(`rest/buys/${row._id}`)
          this.$message({
            type: 'success',
            message: '取消成功!'
          });
          this.fetch()
        })
    },
    replace(row){
      var info = {
        id:row._id
             }
      this.$cookies.set('id', info,'60s')
      this.$router.push('/ticketInquiry')
    },

    async find() {
      let res
      res = await this.$http.post('rest/flights', this.findFlight)
      //const res = await this.$http.get('rest/flights')

      this.find_items = res.data
      console.log(this.find_items)
    },
    login_over() {
      localStorage.clear()
      this.$router.push('login')
    },
    login() {
      this.$router.push('/login')
    },
    user_info() {
      this.$router.push('/useref')
    },
    onSubmit() {
      console.log('submit!');
    },
    current_change(currentPage){
        this.currentPage = currentPage;
      },
    async buy(flights_id) {
      console.log(flights_id)
      let res
      res = await this.$http.put(`rest/flights/${flights_id}`)
      this.$message({
        type: 'success',
        message: '购买成功！'
      })
      console.log('购买成功')
    },
  }
}
</script>

<style>
@import "../assets/css/index.css";
.reserve_card {
  text-align: center;
  font-weight: bold;
  font-size: 18px;
  padding: 20px 0px;
}
.complete_user {
  text-align: center;
  font-weight: bold;
  font-size: 18px;
  padding: 21px 0px;
}
.complete_user_save {
  margin-left: 475px;
}
</style>
